<template>
    <el-dialog title="选择角色" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
        <div class="clearfix">
            <div class="role fl">
                <div class="tree-top">
                    <el-button type="primary" size="mini" @click="handleExpandall(true, 'tree')">展开</el-button>
                    <el-button type="danger" size="mini" @click="handleExpandall(false, 'tree')">收起</el-button>
                </div>
                <el-tree
                    :data="roleList"
                    show-checkbox
                    node-key="id"
                    ref="tree"
                    :expand-on-click-node="false"
                    @node-click="nodeClick"
                    default-expand-all
                    class="mt15 tree-height"
                ></el-tree>
            </div>
            <div class="fr menu">
                <div class="tree-top">
                    <el-button type="primary" size="mini" @click="handleExpandall(true, 'menuTree')">展开</el-button>
                    <el-button type="danger" size="mini" @click="handleExpandall(false, 'menuTree')">收起</el-button>
                </div>
                <div class="menu-container">
                    <el-tree
                        ref="menuTree"
                        v-loading="menuLoading"
                        :data="menuData"
                        size="mini"
                        show-checkbox
                        node-key="id"
                        :expand-on-click-node="false"
                        :render-content="renderContent"
                        :props="defaultProps"
                        default-expand-all
                        element-loading-text="拼命加载中"
                        class="mt15 tree-height"
                        :check-strictly="true"
                    />
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="closeDialog">取 消</el-button>
            <el-button type="primary" size="small" @click="submitForm">确 定</el-button>
        </span>
    </el-dialog>
</template>
<script>
import { dialogVisible } from '@/mixins/dialogMixin'
import { getAllMenuByApp, getMenuByRole } from '@/api/system/user'
export default {
    components: {},
    mixins: [dialogVisible],
    props: {
        roleList: {
            type: Array,
            default: () => []
        },
        selectList: {
            type: Array,
            default: () => []
        }
    },
    watch: {
        selectList: {
            handler(newValue) {
                // this.roleIds = newValue
                this.$refs.tree.setCheckedKeys(newValue)
            }
        }
    },
    data() {
        return {
            roleIds: [],
            menuLoading: false,
            menuData: [],
            defaultProps: {
                children: 'children',
                label: 'resourceName'
            }
            // treeProps: {
            //     value: 'id',
            //     label: 'appName',
            //     children: 'roleVoList'
            // }
        }
    },
    created() {},
    methods: {
        submitForm() {
            let roleIds = this.$refs.tree.getCheckedKeys()
            if (roleIds.length === 0) {
                this.$message.warning('请选择角色')
            } else {
                roleIds = roleIds.filter(item => {
                    return item.indexOf('APP') === -1
                })
                this.$emit('submitRole', roleIds)
            }
        },
        handleChange() {},
        // 收起与展开
        handleExpandall(type, ref) {
            this.$nextTick(() => {
                for (var i = 0; i < this.$refs[ref].store._getAllNodes().length; i++) {
                    this.$refs[ref].store._getAllNodes()[i].expanded = type
                }
            })
        },
        nodeClick(node) {
            if (node.appId) {
                // this.menuLoading = true
                getAllMenuByApp({ appId: node.appId })
                    .then(res => {
                        this.menuData = res.data
                        this.setDisabled(this.menuData)
                    })
                    .finally(() => {
                        // this.menuLoading = false
                    })
                // getMenuByRole({ roleId: node.id }).then((res) => {
                //     this.$refs.menuTree.setCheckedKeys(res.data)
                // })
            }
        },
        setDisabled(treeData) {
            treeData.forEach(item => {
                item.disabled = true
                if (item.children && item.children.length > 0) {
                    this.setDisabled(item.children)
                }
            })
        },
        // 菜单的渲染dom处理
        renderContent(h, { node, data, store }) {
            if (data.type === 1) {
                return (
                    <div class="column-container">
                        <el-tag style="text-algin:center;" size="mini" type="primary">
                            {data.resourceName}
                        </el-tag>
                    </div>
                )
            } else if (data.type === 2) {
                return (
                    <div class="column-container">
                        <el-tag style="text-algin:center;" size="mini" type="success">
                            {data.resourceName}
                        </el-tag>
                    </div>
                )
            } else {
                return (
                    <div class="column-container">
                        <el-tag style="text-algin:center;" size="mini" type="danger">
                            {data.resourceName}
                        </el-tag>
                    </div>
                )
            }
        }
    }
}
</script>
<style scoped>
.role {
    padding-left: 30px;
    width: 50%;
}
.menu {
    width: 50%;
}
.tree-height {
    height: 500px;
    overflow-y: auto;
}
.tree-top {
    text-align: center;
}
</style>
